<template>
  <div>
    <el-row>
      <el-col :span="24" align="right">
        <div style="margin-top:10px">
          <el-button @click="addNewRecord" type="primary">添加网格</el-button>
          <el-input style="width:200px" v-model="filters.netGridName" placeholder="请输入网格名称"></el-input>
          <!-- <el-input style="width:200px" v-model="filters.netGridLeaderName" placeholder="请输入网格长姓名"></el-input> -->
          <el-button type="primary" icon="search" @click="getnetGridInfo">搜索</el-button>
          <el-button type="primary" @click="flushAll">刷新</el-button>
        </div>
        <el-row style="margin-top:20px">
          <el-col :span="24">
            <el-table :data="list" border @expand="show" :row-key="getRowKeys" :expand-row-keys="expands">
              <!-- <el-table-column type="expand">
                <template scope="scope">
                  <el-table :data="scope.row.children">
                    <el-table-column v-for="(v,k,i) in props2" :key="i" :label="labels2[i]">
                      <template scope="scope">
                        <span v-if="k==='sex'">
                          {{scope.row[k]==1?'男':'女'}}
                        </span>
                        <span v-else>
                          {{scope.row[k]}}
                        </span>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-table-column> -->
              <el-table-column type="index"></el-table-column>
              <el-table-column v-for="(v,k,i) in props" :key="i" :label="labels[i]" align="center">
                <template scope="scope">
                  <span v-if="k==='sex'">
                    {{scope.row[k]==1?'男':'女'}}
                  </span>
                  <span v-else-if="k=='fatherNetGridName'">
                    {{scope.row[k]==null?'开发区管委会':scope.row[k]}}
                  </span>
                  <span v-else>
                    {{scope.row[k]}}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" align="center">
                <template scope="scope">
                  <el-button type="text" @click="editnetGridInfo(scope.row.netGridID)">
                    编辑</el-button>
                  <el-button type="text" @click="deletenetGridInfo(scope.row.netGridID)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24" style="margin-top:10px" align="right">
            <el-pagination layout="prev, pager, next" :total="totalInfo" @current-change="handleCurrentChange">
            </el-pagination>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-dialog title="添加网格" size="small" :visible.sync="visible">
      <el-form :model="form2" ref="videoForm" label-width="200px" label-suffix="：">
        <el-form-item v-for="(v,k,i) in form2" :label="label[i]" :key="v.id" :prop="k">
          <el-select v-if="k=='fatherNetGridID'" v-model="form2[k]">
            <el-option v-for="(v,i) in NetGrid" :key="i" :value="v.netGridID" :label="v.netGridName"></el-option>
          </el-select>
          <el-input-number :min="0" v-else-if="k=='netGridMemberNumber'||k=='netGridNumber'||k=='netGridArea'" v-model="form2[k]"></el-input-number>
          <el-date-picker v-else-if="k=='orgCreateDate'" v-model="form2[k]" placeholder="netGridArea"></el-date-picker>
          <el-input v-else v-model="form2[k]" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="reset">重置</el-button>
          <el-button type="primary" @click="addNetGird">添加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api/netGridManage";
import * as api2 from "@/api/zonghezhili/duiwujianshe";
import { getToken } from "../../utils/auth";
export default {
  data() {
    return {
      visible: false,
      route_tab_loading: false,
      filters: {
        netGridName: null,
        // netGridLeaderName: null,
        page: 1,
        pageSize: 10
      },
      OrgType: [],
      LevelType: [],
      list: [
        {
          netGridID: "", //            bigint not null auto_increment,
          netGridName: "", //                varchar(100) comment '网格名称',
          netGridLeaderName: "", //          varchar(50) comment '网格长姓名',
          netGridMemberNumber: "", //        int comment '网格成员数量',
          netGridNumber: "", //              int comment '网格户数',
          netGridArea: "", //                int comment '网格面积',
          fatherNetGridID: "" //           bigint comment '上一级网格的ID号，初始值为-1，表示最高网格的编号。',
        }
      ],
      List2: [],
      totalInfo: 0,
      NetGrid: [],
      prop: {
        value: "netGridID",
        label: "netGridName",
        children: "children"
      },
      props: {
        fatherNetGridName: "",
        netGridName: "", //                varchar(100) comment '网格名称',
        // netGridLeaderName: "", //          varchar(50) comment '网格长姓名',
        netGridMemberNumber: "", //        int comment '网格成员数量',
        netGridNumber: "", //              int comment '网格户数',
        netGridArea: "" //                int comment '网格面积',
      },
      props2: {
        netGridLeaderName: "杨龙华",
        netGridLeaderTel: "13815168246",
        partyName: "赵育平",
        partyTel: "13645298903",
        policeName: "黄华京",
        policeTel: "13921550070",
        netGridMemberName: "秦吉友",
        netGridMemberTel: "13775390128",
        assistantName: "谢叶香",
        assistantTel: "15305298987"
      },
      form2: {
        fatherNetGridID: -1, //           bigint comment '上一级网格的ID号，初始值为-1，表示最高网格的编号。',
        netGridName: "", //                varchar(100) comment '网格名称',
        // netGridLeaderName: '', //          varchar(50) comment '网格长姓名',
        netGridMemberNumber: "", //        int comment '网格成员数量',
        netGridNumber: "", //              int comment '网格户数',
        netGridArea: "" //                int comment '网格面积',
      },
      label: [
        "上级网格",
        "网格名称",
        // "网格长姓名",
        "网格成员数量",
        "网格户数",
        "网格面积"
      ],
      labels: ["上级网格", "网格名称", "网格成员数量", "网格户数", "网格面积"],
      labels2: [
        "网格长姓名",
        "联系电话",
        "党组长姓名",
        "联系电话",
        "警长",
        "联系电话",
        "网格员",
        "联系电话",
        "协理员",
        "联系电话"
      ],
      // 要展开的行，数值的元素是row的key值
      expands: [],
      // 获取row的key值
      getRowKeys(row) {
        return row.netGridID;
      }
    };
  },
  methods: {
    addNetGird() {
      api.addNetGrid(this.form2).then(res => {
        if (res.data) {
          this.$message({
            type: "success",
            message: "添加成功!"
          });
          this.reset();
          this.visible = false;
        } else {
          this.$message({
            type: "error",
            message: res.message
          });
        }
      });
    },
    reset() {
      for (var key in this.form2) {
        this.form2[key] = "";
      }
      this.form2.fatherNetGridID = -1;
    },
    show(row, expanded) {
      var value;
      this.$jquery.ajax({
        url: "/msmis/api/netGrid/getNetGridMemberByFatherID",
        headers: { token: getToken() },
        async: false,
        data: {
          id: row.netGridID
        },
        success: function(res) {
          value = res.data;
        }
      });
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].netGridID == row.netGridID) {
          this.list[i].children = value;
        }
      }
    },
    deletenetGridInfo(id) {
      this.$confirm("是否删除此驾驶员记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          api.deleteNetGrid(id).then(res => {
            if (res.data) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getnetGridInfo();
            } else {
              this.$message({
                type: "error",
                message: res.message
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    flushAll() {
      (this.filters.netGridName = null), this.getnetGridInfo();
    },
    handleCurrentChange(val) {
      this.filters.page = val;
      this.getnetGridInfo();
    },
    ckDetail(id) {
      this.$router.push({
        path: "info",
        query: {
          id: id
        }
      });
    },
    addNewRecord() {
      this.$nextTick(_ => {
        this.visible = true;
      });

      // this.$router.push("add");
    },
    GetNodeValue(val) {
      this.filters.netGridID = val;
      this.getnetGridInfo();
    },
    editnetGridInfo(id) {
      this.$router.push({
        path: "edit",
        query: {
          id: id
        }
      });
    },
    getnetGridInfo() {
      api.getNetGridQuery(this.filters).then(res => {
        this.list = res.data.grids;
        for (let i = 0; i < this.list.length; i++) {
          this.list[i].children = [];
        }
        this.route_tab_loading = true;
        this.totalInfo = res.data.page.totalCount;
      });
      this.route_tab_loading = true;
      // this.filters.netGridName = null;
    }
  },
  mounted() {
    this.getnetGridInfo();
  },
  created() {
    api2.fetchServedPersonManageTypes().then(res => {
      this.NetGrid = res.data.netGrid;
      let item = {
        netGridID: -1,
        netGridName: "开发区管委会(无父级)"
      };
      this.NetGrid.unshift(item);
    });
  }
};
</script>


<style scoped>
</style>
